<template>
  <el-dialog :title="deviceTypeName+'策略管理'"
             top="110px"
             :visible.sync="manageOtherStrategies"
             :close-on-press-escape="false"
             :close-on-click-modal="false"
             :before-close="closeAllModel">
    <hr class="boundary">
    <div class="body">
      <el-card class="cardGroups">
        <div slot="header" class="clearfix">
          <span>策略管理</span>
        </div>
        <div class="strategiesName" v-for="(item,index) in strategiesList"
             @click="selectStrategy(index,item.id,item.name)">
          {{item.name}}
        </div>
        <div class="cardFooter"><i class="el-icon-remove" @click="showDelModel"></i>
        <i
                class="el-icon-circle-plus"
                @click="showAddModel"></i></div>
      </el-card>
      <div class="strategyContent">
        <div class="titleBoundary" style="height: 70%">
          <div class="title">策略详情</div>
          <div class="manageTime">
            <div>执行策略: <span>{{strategyInfo.executionStrategy}}</span></div>
            <div>执行时间: <span>{{strategyInfo.executionTime}}</span></div>
            <div class="showTime">
              <div class="startTime">开始时间:<span>{{strategyInfo.startTimeHour}}</span>时<span>{{strategyInfo.startTimeMin}}</span>分
              </div>
              <div class="endTime">
                结束时间:<span>{{strategyInfo.endTimeHour}}</span>时<span>{{strategyInfo.endTimeMin}}</span>分
              </div>
            </div>
            <div>执行条件: <span>{{strategyInfo.people}}</span></div>
            <div>执行操作: <span>{{strategyInfo.switch}}</span></div>
          </div>
        </div>
        <el-button type="warning" @click="showGroupModel">应 用</el-button>
        <el-button type="primary" @click="showModifyModel">修 改</el-button>

      </div>
    </div>
    <hr class="boundary">
<!--    <add-strategy :addStrategy="addStrategy" @closeModel="closeModel"></add-strategy>-->
    <add-currency-strategy :addStrategy="addStrategy" :device-type-id="deviceTypeId" @closeModel="closeModel"></add-currency-strategy>
    <update-currency-strategy :modify-strategy="modifyStrategy" :modifyId="selectId" :modifyInfo="modifyInfo" @closeModel="closeModel" @showStrategyData="showStrategyData" @getStrategiesList="getStrategiesList"></update-currency-strategy>

    <use-strategy :groupModel="groupModel" :useId="selectId" @closeModel="closeModel"></use-strategy>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeAllModel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import addCurrencyStrategy from './strategies/addCurrencyStrategy'
  import updateCurrencyStrategy from './strategies/updateCurrencyStrategy'
  import modifyStrategy from './strategies/modifyStrategy'
  import delStrategy from './strategies/delStrategy'
  import useStrategy from './strategies/useStrategy'

  export default {
    props: {
      deviceTypeId: Number,
      deviceTypeName: String
    },
    components: {
      addCurrencyStrategy,
      updateCurrencyStrategy,
      modifyStrategy,
      delStrategy,
      useStrategy
    },
    data () {
      return {
        manageOtherStrategies: true,
        addStrategy: false,
        selectId: 0,
        selectName:'',
        selectIndex:-1,
        modifyStrategy: false,
        delStrategy: false,
        groupModel: false,
        strategiesList: [],
        strategyInfo: {
          executionStrategy: '',
          executionTime: '',
          startTimeHour: '',
          endTimeHour: '',
          people: '',
          switch: ''
        },
        modifyInfo: {
          name: '',
          week: [],
          startTimeHour: 0,
          startTimeMin: 0,
          endTimeHour: 0,
          endTimeMin: 0,
          minPeople: 1,
          maxPeople: 10,
          switch: 0,
        },
        days: ['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      }
    },
    methods: {
      getStrategiesList () {
        let self = this
        $.ajax({
          type: 'GET',
          async: false,
          url: this.api + 'currencyStrategy/'+self.deviceTypeId,
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          },
          xhrFields: {
            withCredentials: true
          },
          success (data) {
            self.strategiesList = data
          }
        })

      },

      showGroupModel () {
        if(this.selectIndex !== -1){
          this.groupModel = true
        }
      },

      // 选中预设
      selectStrategy (index,id,name) {
        this.selectId = id
        this.selectName = name;
        this.selectIndex = index;
        this.showStrategyData()
      },
      showStrategyData(){
        let name = this.selectName
        let index = this.selectIndex
        this.$nextTick(function () {
          let strategiesName = document.getElementsByClassName('strategiesName')
          for (let i = 0; i < strategiesName.length; i++) {
            let campus = strategiesName[i].innerText.replace(/\s/g, '')// 清除按钮导致的回车
            if (name === campus) {//被选中
              strategiesName[i].style.background = '#BBB'
            } else {
              strategiesName[i].style.background = '#FFF'
            }
          }
        })

        let sHour, eHour, sMin, eMin, week

        sHour = this.strategiesList[index].start_time.split(':')[0]
        sMin = this.strategiesList[index].start_time.split(':')[1]
        eHour =this.strategiesList[index].end_time.split(':')[0]
        eMin = this.strategiesList[index].end_time.split(':')[1]
        if (sHour === '00' && sMin === '00' && eHour === '23' && eMin === '59') {
          this.strategyInfo.executionStrategy = '全天执行'
        } else {
          this.strategyInfo.executionStrategy = '指定时间段'
        }

        this.strategyInfo.executionTime = ''
        week = this.strategiesList[index].week
        this.modifyInfo.week = []
        for (let i = 0; i < week.length; i++) {
          this.strategyInfo.executionTime += this.days[week.charAt(i)]
          this.modifyInfo.week.push(this.days[week.charAt(i)])
          if(i < week.length-1){
            this.strategyInfo.executionTime += '、'
          }
        }

        this.strategyInfo.startTimeHour = sHour
        this.modifyInfo.startTimeHour = sHour

        this.strategyInfo.startTimeMin = sMin
        this.modifyInfo.startTimeMin = sMin

        this.strategyInfo.endTimeHour = eHour
        this.modifyInfo.endTimeHour = eHour

        this.strategyInfo.endTimeMin = eMin
        this.modifyInfo.endTimeMin = eMin
        this.modifyInfo.switch = this.strategiesList[index].switch
        this.modifyInfo.name = this.strategiesList[index].name
        this.modifyInfo.maxPeople = this.strategiesList[index].max_people
        this.modifyInfo.minPeople = this.strategiesList[index].min_people

        if( this.strategiesList[index].min_people > 0){
          this.strategyInfo.people = "有人"
          if(this.strategiesList[index].min_people>this.strategiesList[index].max_people) {
            this.strategyInfo.people += "无人都行"
          }else{
            this.strategyInfo.people += "(人数小于等于"+this.strategiesList[index].max_people+"人)"
          }
        }else{
          this.strategyInfo.people = "无人"
        }

        if(this.strategiesList[index].switch == 0){
          this.strategyInfo.switch = "断电"
        }else{
          this.strategyInfo.switch = "送电"
        }


      },

      // 添加新策略
      showAddModel () {
        this.addStrategy = true
      },

      showModifyModel () {
        if(this.selectIndex !== -1){
          this.modifyInfo = Object.assign({}, this.modifyInfo)
          this.modifyStrategy = true
        }
      },

      showDelModel () {
        let self = this
        if (confirm("你确定删除该策略吗？")) {
            $.ajax({
              type: 'DELETE',
              url: this.api + `currencyStrategy/${this.selectId}`,
              headers: {
                'X-Requested-With': 'XMLHttpRequest'
              },
              xhrFields: {
                withCredentials: true
              },
              success (data) {
                if(data == 1){
                  self.$message({
                    message: '删除策略成功',
                    type: 'success'
                  })
                  self.getStrategiesList()
                  // self.getBlockList()
                  // self.clearCSS(0)
                  // self.getRoomsList(self.id)
                }

              }
            })

        }
        // if (confirm("你确定删除该策略吗？")) {
        // }
        // this.delStrategy = true
      },

      // 关闭子级模态框
      closeModel (type) {
        if (!type) {
          this.addStrategy = false
          this.modifyStrategy = false
          this.groupModel = false
        } else {
          this.delStrategy = false
          if (type === 1) {
            this.selectStrategy(0,this.strategiesList[0].id, this.strategiesList[0].name)
          }
        }
        this.getStrategiesList()
      },

      closeAllModel () {
        this.manageOtherStrategies = false
        this.$emit('closeModel')
      }
    },
    mounted () {
      this.getStrategiesList()
      if (this.strategiesList.length !== 0) {
        this.selectStrategy(0,this.strategiesList[0].id, this.strategiesList[0].name)
      }
      $.ajax({
        type:'GET',
        url:this.api+'/userInfo',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        },
        xhrFields: {
          withCredentials: true
        },
        success(data){
          console.log(data)
        }
      })
    }
  }
</script>

<style scoped>
  @import '../../assets/public/model.css';
  @import '../../assets/manageStrategy.css';
</style>
